import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Demo", style: TextStyle(color: Colors.white)),
          backgroundColor: Colors.blue,
        ),
        body: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    // 获取屏幕的宽高
    // final size = MediaQuery.of(context).size;
    return Padding(
      padding: EdgeInsets.all(10),
      child: Wrap(
        // alignment: WrapAlignment.center,
        spacing: 10, // 水平间距
        runSpacing: 10, // 垂直间距
        // direction: Axis.vertical,
        children: [
          Button(
            "第1集",
            onPressed: () {},
          ),
          Button(
            "第2集uuuuu",
            onPressed: () {},
          ),
          Button(
            "第3集",
            onPressed: () {},
          ),
          Button(
            "第4集",
            onPressed: () {},
          ),
          Button(
            "第588集",
            onPressed: () {},
          ),
          Button(
            "第6集",
            onPressed: () {},
          ),
          Button(
            "第7集",
            onPressed: () {},
          ),
          Button(
            "第8集",
            onPressed: () {},
          ),
          Button(
            "第9集",
            onPressed: () {},
          ),
          Button(
            "第10集",
            onPressed: () {},
          ),
          Button(
            "第10集",
            onPressed: () {},
          ),
          Button(
            "第10集",
            onPressed: () {},
          ),
          Button(
            "第10集",
            onPressed: () {},
          ),
          Button(
            "第10集",
            onPressed: () {},
          ),
          Button(
            "第10集",
            onPressed: () {},
          ),
        ],
      ),
    );
  }
  // 页面上显示一个容器 宽度是屏幕的宽度 高度是容器的
}

class Button extends StatelessWidget {
  String text; // 按钮的文字
  void Function()? onPressed; // 方法
  Button(this.text, {super.key, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: ElevatedButton(
          style: ButtonStyle(
              shape: WidgetStateProperty.all(RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8))),
              backgroundColor:
                  WidgetStateProperty.all(Color.fromARGB(211, 255, 255, 255)),
              foregroundColor: WidgetStateProperty.all(Colors.black45)),
          onPressed: onPressed,
          child: Text(text)),
    );
  }
}
